<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sms__syssms}">
      <el-form :inline="true" :model="dataForm" ref="dataForm"  >
        <el-form-item prop="sendNumbers">
          <el-input v-model="dataForm.sendNumbers" placeholder="请输入邮箱号" clearable >
            <template slot="prepend">邮箱号码</template>
<!--            <template slot="append">.com</template>-->
            </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dataFormSubmitHandle()" type="primary" >{{ $t('sendMessage') }}</el-button>
        </el-form-item>
        <div style="margin: 20px 0;"></div>
        <el-form-item prop="theme">
          <el-col style="width: 465px">
<!--          <el-input v-model="dataForm.theme" placeholder="请输入邮件主题" clearable >-->
<!--            <template slot="prepend">主题</template>-->
<!--          </el-input>-->
            <el-autocomplete
                popper-class="my-autocomplete"
                v-model="dataForm.theme"
                :fetch-suggestions="querySearch"
                placeholder="请输入主题"
                @select="handleSelect">
              <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
                  @click="handleIconClick">
              </i>

              <template slot="prepend">邮件主题</template>-->
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
              </template>
            </el-autocomplete>
          </el-col>
        </el-form-item>
        <div style="margin: 20px 0;"></div>
        <el-form-item @submit.native.prevent>
          <el-col style="width: 465px">
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容,文本框可下拉"
            :rows="10"
            v-model="dataForm.recipients">
        </el-input>
          </el-col>
        </el-form-item>
      </el-form>

    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './syssms-add-or-update'
import debounce from "lodash/debounce";
import Cookies from "_js-cookie@2.2.1@js-cookie";
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sms/syssms/page',
        getDataListIsPage: true,
        exportURL: '/sms/syssms/export',
        deleteURL: '/sms/syssms',
        deleteIsBatch: true,

        restaurants: [],
        state: ''
      },
      dataForm: {
        sendNumbers: '',
        theme:'',
        recipients:'',
        value:''
      }
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http.post('/sms/syssms/emails', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          // Cookies.set('token', res.data.token)
          // this.$router.replace({ name: 'home' })
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false }),

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "学院排督导提醒"},
        { "value": "新学期课表提醒"}
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }


}
</script>
